//轮播图动画

//test
// document.getElementById("boke").onclick = function(){
// 	console.log('123');
// };

	//1.获取最外面的div banner(先得到要操作的所有元素)
	var banner = document.getElementById("banner");
	//获取相框
	var screen = banner.children[0];
	//获取ul
	var ulObj = screen.children[0];
	//获取ul中所有的li
	var list = ulObj.children;
	//获取ol
	var olObj = screen.children[1];
	//获取相框的宽度
	var imgWidth = screen.offsetWidth;
	//获取左右焦点
	var arr = banner.children[1];
	//全局变量 图片的索引值，用来保证下方的小标签和左右焦点能够同步
	var index = 0;


	//2.创建小按钮，根ul中的li个数
	for(i=0;i<list.length;i++){
		//创建li标签，加入ol中
		var liObj = document.createElement("li");
		//在每个ol中的li标签上自定义一个属性储存索引
		liObj.setAttribute("index", i);
		olObj.appendChild(liObj);
		// liObj.innerHTML = (i+1);
		//给创建的li标签注册鼠标进入事件
		liObj.onmouseover = function(){
			//先干掉ol中所有li标签的样式
			for(var j=0;j<olObj.children.length;j++){
				olObj.children[j].removeAttribute("class");
			}
			this.className = "current";
			//获取当前的索引值
			index = this.getAttribute("index");
			animate(ulObj,-index*imgWidth);
		};
	}
	//设置ol中第一个标签的颜色
	olObj.children[0].className = "current";



	//3.左右活动标签
	//克隆ul中的第一个图片添加到ul最后一张，实现无缝切换
	ulObj.appendChild(ulObj.children[0].cloneNode(true));//true是克隆该标签所有属性和内容，false是只克隆这个标签类型，返回节点类型
	//戍边进入banner显示左右焦点
	//自动效果
	var timeId =  setInterval(clickHandle,4000);
	banner.onmouseover = function(){
		// arr.style.display = "block";
		clearInterval(timeId);
	};
	banner.onmouseout = function(){
		// arr.style.display = "none";
		timeId =  setInterval(clickHandle,4000);
	};
	//点击左右键点按钮切换图片
	document.getElementById("right").onclick = clickHandle;
	function clickHandle(){
		if(index==list.length-1){
			index = 0;
			ulObj.style.left = 0+"px";
		}
			index++;
			animate(ulObj,-index*imgWidth);

			//如果index=5，说明显示第六张，内容是第一张图片,让下面的小标签和图片同步
			if(index==list.length-1){
				for(var j=0;j<olObj.children.length;j++){
				olObj.children[j].removeAttribute("class");
			}
			olObj.children[0].className = "current";
			}else{
				for(var j=0;j<olObj.children.length;j++){
				olObj.children[j].removeAttribute("class");
			}
			olObj.children[index].className = "current";
			}
	};


	document.getElementById("left").onclick = function(){
		if(index==0){
			index=ulObj.children.length-1;
			ulObj.style.left = -index*imgWidth+"px";
		}
		index--;
		animate(ulObj,-index*imgWidth);
		//设置小按钮的颜色
		for(var i=0;i<olObj.children.length;i++){
			olObj.children[i].removeAttribute("class");
		}
		olObj.children[index].className = "current";
	};



//封装动画函数
	function animate(element,target){
				//先清理一个定时器
				clearInterval(element.timeId);
					element.timeId = setInterval(function(){
					//获取div当前的位置
					var current = element.offsetLeft;
					var step = 25;
					step=current<target?step:-step;
					current+= step;		
					if(Math.abs(target-current)>Math.abs(step)){
						element.style.left = current+"px";
					}else{
						element.style.left = target+"px";
						clearInterval(element.timeId);
					}
				},1);	
			}

//点击回到顶部
window.onscroll = function() {
    scrollFunction()
};
function scrollFunction() {
    if (document.body.scrollTop > 450 || document.documentElement.scrollTop > 450) {
        document.getElementById("btnTop").style.display = "block";
    } else {
        document.getElementById("btnTop").style.display = "none";
    }
}
// 点击按钮，返回顶部
document.getElementById("btnTop").onclick = function(){
	returnTop();
}
function returnTop() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}